var effects = new Array();

var mussleFlash = new Image();
mussleFlash.src = 'images/mussle_flash.png';

var mussleFlash = new Image();
mussleFlash.src = 'images/mussle_flash.png';

var partikels = new Image();
partikels.src = 'images/partikels.png';

var blood = new Image();
blood.src = 'images/blood.png';

var smoke = new Image();
smoke.src = 'images/smoke.png';

function ShootEffect() {
    this.start = new Vector();
    this.end = new Vector();
    this.angle = 0;
    this.bulletTranslate = 0;
    this.active = true;
    this.name = "";
    this.partikleDuration = 35;

    this.fillUpWithJsonData = function(jsonData) {
        this.start.x = jsonData.startx;
        this.start.y = jsonData.starty;
        this.end.x = jsonData.endx;
        this.end.y = jsonData.endy;
        this.angle = jsonData.angle;
        this.name = jsonData.name;
    };

    this.draw = function(context) {

        var length = this.end.dist(this.start);

        context.translate(this.start.x, this.start.y);
        context.rotate(this.angle);

        context.save();
        context.translate(length - 20, -10);
        context.drawImage(partikels, 0, 0);
        context.restore();

        context.save();
        context.globalAlpha = 0.4;
        context.translate(0, -10);
        context.drawImage(mussleFlash, 0, 0);
        context.restore();

        context.save();
        context.translate(this.bulletTranslate, 0);
        context.strokeStyle = 'yellow';
        context.globalAlpha = 0.4;
        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(50, 0);
        context.stroke();
        context.restore();

        this.bulletTranslate += 50;

        if (this.bulletTranslate >= length - 10) {
            this.active = false;
            return;
        }

        // light
        context.save();

        context.beginPath();
        var // Radii of the white glow.
                innerRadius = 0,
                outerRadius = 120,
                // Radius of the entire circle.
                radius = 120;

        var gradient = context.createRadialGradient(0, 0, innerRadius, 0, 0, outerRadius);
        gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
        gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

        context.arc(0, 0, radius, 0, 2 * Math.PI);

        context.fillStyle = gradient;
        context.fill();
        context.restore();
    };
}

function BloodEffect() {
    this.pos = new Vector();
    this.angle = 0;
    this.active = true;

    this.draw = function(context) {
        context.translate(this.pos.x, this.pos.y);
        context.rotate(this.angle + 2 * Math.PI);
        context.translate(20, -70);
        context.drawImage(blood, 0, 0);
    };
}


function ShellEffect() {
    this.pos = new Vector();
    this.angle = 0;
    this.active = true;
    this.rotModifier = 0.0;
    this.moveDuration = 0.5;

    this.draw = function(context) {

        context.translate(this.pos.x, this.pos.y);
        context.rotate(this.angle + this.rotModifier);
        context.strokeStyle = '#C96333';
        context.lineWidth = 3;
        context.beginPath();
        context.moveTo(-5, 0);
        context.lineTo(5, 0);
        context.stroke();

        this.moveDuration -= 0.01;
        if (this.moveDuration >= 0) {
            this.rotModifier += 0.1;

            this.pos.x += this.moveDuration * 6 * Math.cos(this.angle + 1.3);
            this.pos.y += this.moveDuration * 6 * Math.sin(this.angle + 1.3);
        }
    };
}

function SmokeEffect() {
    this.pos = new Vector();
    this.angle = 0;
    this.active = true;
    this.duration = 100;

    this.draw = function(context) {
        var alpha = 100 / 100;
        context.globalAlpha = 0.2 * alpha;
        context.translate(this.pos.x, this.pos.y);
        context.rotate(this.angle);
        context.translate(0, -100);
        context.drawImage(smoke, 0, 0);
        this.duration--;
        if (this.duration <= 0) {
            this.active = false;
        }
    };
}

function addShootEffect(jsonDataEffect) {
    var effect = new ShootEffect();
    effect.fillUpWithJsonData(jsonDataEffect);
    effects[effects.length] = effect;

    var entity = findEntity(effect.name);
    if (entity === null) {
        return;
    }

    var shot = effect.end.sub(effect.start);
    var entitiesHitByShot = calcEntitiesHitByShot(shot, entity);

    for (var i = 0; i < entitiesHitByShot.length; i++) {
        var bloodEffect = new BloodEffect();
        bloodEffect.pos.x = entitiesHitByShot[i].pos.x;
        bloodEffect.pos.y = entitiesHitByShot[i].pos.y;
        bloodEffect.angle = effect.angle;
        effects[effects.length] = bloodEffect;
    }

    var smokeEffect = new SmokeEffect();
    smokeEffect.angle = effect.angle;
    smokeEffect.pos.x = effect.start.x;
    smokeEffect.pos.y = effect.start.y;
    effects[effects.length] = smokeEffect;

    var shellEffect = new ShellEffect();
    shellEffect.angle = effect.angle;
    shellEffect.pos.x = entity.pos.x + (10 * Math.cos(effect.angle + 0.3));
    shellEffect.pos.y = entity.pos.y + (10 * Math.sin(effect.angle + 0.3));

    effects[effects.length] = shellEffect;
}

function drawEffects(context) {
    for (var i = 0; i < effects.length; i++) {
        context.save();
        effects[i].draw(context);
        context.restore();
    }

    for (var i = 0; i < effects.length; i++) {
        if (!effects[i].active) {
            effects.splice(i, 1);
        }
    }
}